<template>
	<div class="login">
		<div class="wrap">
			<h2>保尔教务系统欢迎您!</h2>
			<div class="inner">
				<label for="" style="font-weight: 500; ">用户 : </label><el-input class="el_input" v-model="username" placeholder="请输入用户名"></el-input>
			</div>
			<div class="inner">
				<label for="" style="font-weight: 500;">密码 : </label><el-input class="el_input" type="password" v-model="password" placeholder="请输入密码" @keyup.native.enter="gohome"></el-input>
			</div>
			<div class="inner">
				<el-button class="btn" type="primary" round @click="gohome">立即登录</el-button>
			</div>
		</div>
	</div>
</template>

<script>
import axios from 'axios'
	export default {
		data() {
			return{
				baseUrl:require("../js/baseUrl.js").baseUrl,
				username:"",
				password:"",
				roleIds:[]
			}
		},
		methods:{
			gohome(){
				// this.$router.push("/homepage")
				this.$http.post(this.baseUrl+"SchoolSys/user/login",{
					userName:this.username,
					pwd:this.password
				}).then(res=>{
					if(res.data.code==200){
						// console.log("aaa")
						this.$message({
							message:"登陆成功",
							type:"success"
						})
						res.data.data.user.roles.forEach(v => {
							this.roleIds.push(v.roleId)
						});
						sessionStorage.setItem("userId",res.data.data.user.userId)
						sessionStorage.setItem("userName",this.username)
						sessionStorage.setItem("roleId",this.roleIds)
						sessionStorage.setItem("roleName",res.data.data.user.roleName)
						sessionStorage.setItem("password",res.data.data.user.pwd)
						sessionStorage.setItem("token",res.data.data.token)
						this.$router.push("/homepage")
					}else{
						// console.log(res.data.msg)
						this.$message({
							message:res.data.msg,
							type:"error"
						})
						this.username=""
						this.password=""
					}
				})
			}
		},
		mounted(){
			// console.log(sessionStorage.getItem("userName"))
			if(sessionStorage.getItem("userName")!=null){
				this.$router.push("/homepage")
			}
		}
	}
</script>

<style>
	*{
		margin: 0;
		padding: 0;
	}
	.login{
		background-image: url(../../public/bg.jpg);
		height: 100vh;
		width: 100vw;
		background-size: cover;
		display: flex;
	}
	.login .wrap{
		background-color: #ffffff;
		width: 500px;
		height: 400px;
		margin: auto;
		border-radius: 20px;
	}
	.login .wrap .el_input{
		border: none;
	}
	.login .wrap .inner{
		width: 98%;
		text-align: center;
		
	}
	.login .wrap h2{
		text-align: center;
		color: #333333;
		margin-top: 40px;
		margin-bottom:8px;
	}
	.login .el-input{
		width: 75%;
		border: 1px solid #999;
		margin-top: 30px;
		font-size: 18px;
		margin-left: 5px;
	}
	.login label{
		font-size: 18px;
	}
	.login .btn{
		width: 50%;
		height: 45px;
		margin-top: 50px;
		font-size: 18px;
		line-height: 20px;
		
	}
</style>